<template>
  <view class="page">
    <!-- 页头导航 -->
    <view class="header-nav">
      <view class="nav-left" @tap="goBack">
        <image
          class="back-icon"
          src="/static/icons/left_arrow.png"
          mode="aspectFit"
        ></image>
      </view>
      <view class="nav-title">设置</view>
      <view class="nav-right"></view>
    </view>

    <!-- 内容区域 -->
    <view class="container">
      <!-- 退出登录按钮 -->
      <view class="logout-section">
        <button class="logout-btn" @tap="handleLogout">退出登录</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useUserStore } from "@/stores/modules/user";

const userStore = useUserStore();

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 处理退出登录
const handleLogout = () => {
  uni.showModal({
    title: "确认退出",
    content: "确定要退出登录吗？",
    success: async (res) => {
      if (res.confirm) {
        try {
          uni.showLoading({
            title: "退出中...",
            mask: true,
          });

          // 调用退出登录API
          await userStore.logoutRemoteAction();

          uni.hideLoading();
          uni.showToast({
            title: "退出成功",
            icon: "success",
            duration: 1500,
          });

          // 延迟跳转到登录页面
          setTimeout(() => {
            uni.reLaunch({
              url: "/pages/loginRegister/loginRegister",
            });
          }, 1500);
        } catch (error) {
          uni.hideLoading();
          console.error("退出登录失败:", error);
          uni.showToast({
            title: "退出失败，请重试",
            icon: "none",
            duration: 2000,
          });
        }
      }
    },
    cancelText: "取消",
    confirmText: "确认退出"
  });
};
</script>

<style scoped>
.page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 30rpx 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.nav-left {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.nav-right {
  width: 60rpx;
  height: 60rpx;
}

.container {
  padding: 20rpx;
}

.logout-section {
  margin-top: 40rpx;
  padding: 0 20rpx;
}

.logout-btn {
  width: 100%;
  height: 88rpx;
  background-color: #ff4757;
  color: #fff;
  font-size: 32rpx;
  border: none;
  border-radius: 44rpx;
  transition: all 0.3s ease;
}

.logout-btn:active {
  background-color: #e74c3c;
  transform: scale(0.98);
}
</style>
